<template>
  <el-container>
    <div class="background-container">
      <video autoplay muted loop class="background-video">
        <source src="../assets/video/bg_v.mp4" type="video/mp4" />
      </video>
<!--      <div class="logo">-->
<!--        <img src="../assets/image/logo.png" alt="logo" class="logo" />-->
<!--      </div>-->

      
      <el-text class="h1">欢迎访问教务信息管理系统</el-text>
      <el-card class="login-container">
        <h2 class="logintitle">用户登录</h2>
        <form @submit.prevent="handleLogin1">
          <div class="form-group">
            <label for="UserNo">账号：</label>
            <input type="text" id="UserNo" v-model="UserNo" placeholder="输入账号" required />
          </div>
          <div class="form-group">
            <label for="UserPsw">密码：</label>
            <input type="password" id="UserPsw" v-model="UserPsw" placeholder="输入密码" required />
          </div>
<!--          <div class="form-group">-->
<!--            <el-radio-group v-model="role">-->
<!--              <el-radio :label="3" class="custom-radio">学生</el-radio>-->
<!--              <el-radio :label="6" class="custom-radio">教师</el-radio>-->
<!--              <el-radio :label="9" class="custom-radio">管理员</el-radio>-->
<!--            </el-radio-group>-->
<!--          </div>-->
          <button type="submit" class="login-button">登录</button>
        </form>
<!--        <text>Made by Team Y.Y.L.H.Z. </text>-->
      </el-card>
    </div>
  </el-container>
</template>

<script>
import { ref } from 'vue'
import axios from 'axios'



export default {
  data() {
    return {
      UserNo: '',
      UserPsw: '',
      role:ref(3),
      token:'',

    };
  },

  methods: {
    //测试
    async handleLogin1(){
      try {

        const response = await axios.post(`${import.meta.env.VITE_API_BASE_URL}/login`, {
          user_no: this.UserNo,
          user_psw: this.UserPsw,
          user_id: 1
        }, {
          headers: {
            'Content-Type': 'application/json'
          }
        })
        console.log(response.data.code)
        if (response.data.code === '200') {
          this.token=response.data.data.token;
          localStorage.setItem('token', this.token);
          sessionStorage.setItem('UserNo',this.UserNo);
          this.$root.$UserNo = this.UserNo;
          if (response.data.data.userpermission[0] === "student") {
            await this.$router.push({name: 'HomeForStu'});
          } else if (response.data.data.userpermission[0] === "tescher") {
            await this.$router.push({name: 'tea_submitc'});
          } else if (response.data.data.userpermission[0] === "adimin") {
            await this.$router.push({name: 'adm_scourse'});
          }
        } else {
          alert('账号或密码错误');
        }
      } catch (error) {
        console.error('登录失败', error);
        alert('登录出错，请稍后再试');
      }
    }
    },
  mounted() {
    document.title = '登录界面';
  },
};


</script>

<style>
.background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  transform: translate(-50%, -50%);
  background-size: cover;
}

.logo {
  margin-bottom: 20px;
  position: absolute;
  left: 10%;
  top: 6%;
  z-index: -1;
}

.h1 {
  position: absolute;
  left: auto;
  top: 20%;
  height: 40%;
  color: white;
  opacity: 0.8; /* 降低透明度 */
  font-size: 40px;
  font-weight: 700;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.login-container {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.669); /* 半透明背景色 */
  border: 1px solid var(--el-border-color);
  border-radius: 20px;
  height: 300px;
  width: 30%;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.logintitle{
  font-size: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  font-size: 25px;
}

.form-group input {
  font-size: 16px;
}

.login-button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #42b983; /* 按钮背景色 */
  color: white; /* 按钮文字 */
  border: none;
  border-radius: 5px;
}

.login-button:hover {
  background-color: #369670; /* 按钮悬停背景色 */
}

.custom-radio {
  margin-right: 15px;
}

.custom-radio .el-radio__input.is-checked + .el-radio__label {
  color: #409eff;
}

.custom-radio .el-radio__input.is-checked .el-radio__inner {
  border-color: #409eff;
  background: #409eff;
}
</style>